<template>
  <div class="main">
    <H2>本月成绩表</H2>
    <div class="box">
      <div class="head">
        <h3>筛选</h3>
        <el-row class="card">
          <el-col :span="6" class="cardCol">
            <span>查询姓名</span>
            <el-input v-model="search" style="padding-right: 20px"></el-input>
          </el-col>
          <el-col :span="6" class="cardCol">
            <span>学号</span>
            <el-input v-model="indexId" style="padding-right: 20px"></el-input>
          </el-col>
          <el-col :span="6" class="cardCol">
            <span>添加</span>
            <el-button text @click="dialogFormVisible = true"
              >添加新成员</el-button
            >
            <el-dialog v-model="dialogFormVisible" align-center title="添加成员">
              <el-form :model="form">
                <el-form-item label="学号" :label-width="formLabelWidth">
                  <el-input v-model="form.id" autocomplete="off" />
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                  <el-input v-model="form.sex" autocomplete="off" />
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth">
                  <el-input v-model="form.age" autocomplete="off" />
                </el-form-item>
                <el-form-item label="学院" :label-width="formLabelWidth">
                  <el-input v-model="form.college" autocomplete="off" />
                </el-form-item>
                <el-form-item label="分数" :label-width="formLabelWidth">
                  <el-input v-model="form.score" autocomplete="off" />
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer" style="display:flex;">
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                  <el-button type="primary" @click="addList"
                    >确认</el-button
                  >
                </span>
              </template>
            </el-dialog>
          </el-col>
        </el-row>
      </div>
      <el-table
        :data="student"
        border
        :default-sort="{ prop: 'date', order: 'descending' }"
        style="width: 100%"
      >
        <el-table-column label="学号" prop="id" width="100" align="center" />
        <el-table-column label="姓名" prop="name" align="center" />
        <el-table-column label="性别" prop="sex" align="center" />
        <el-table-column label="年龄" prop="age" align="center" />
        <el-table-column label="学院" prop="college" align="center" />
        <el-table-column label="分数" prop="score" align="center" sortable />
        <el-table-column label="是否合格" prop="hege" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >修改
            </el-button>
            
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="showUpdate" align-center title="修改成员">
              <el-form :model="update">
                <el-form-item label="学号" :label-width="formLabelWidth">
                  <el-input v-model="update.id" autocomplete="off" />
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                  <el-input v-model="update.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                  <el-input v-model="update.sex" autocomplete="off" />
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth">
                  <el-input v-model="update.age" autocomplete="off" />
                </el-form-item>
                <el-form-item label="学院" :label-width="formLabelWidth">
                  <el-input v-model="update.college" autocomplete="off" />
                </el-form-item>
                <el-form-item label="分数" :label-width="formLabelWidth">
                  <el-input v-model="update.score" autocomplete="off" />
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer" style="display:flex;">
                  <el-button @click="showUpdate = false">取消</el-button>
                  <el-button type="primary" @click="updateList"
                    >确认</el-button
                  >
                </span>
              </template>
            </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, reactive,toRaw } from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

let store = useStore();
// 获取数据
store.dispatch("getStudent");
console.log(store.state.month.tableData);

interface User {
  id: string;
  college: string;
  sex: string;
  age: string;
  score: Number;
  name: string;
  hege?: string;
}

// 查询姓名
const search = ref("");
// 查询学号
const indexId = ref("");

// 删除
const handleDelete = (index: number, row: User) => {
  console.log(index, row);
  store.state.month.tableData.splice(index, 1);
};
let student = computed(() => {
  if (search.value != "") {
    // 姓名
    return store.state.month.tableData.filter(
      (item: { name: string | string[] }) => {
        return item.name.indexOf(search.value) !== -1;
      }
    );
  } else if (indexId.value != "") {
    // 学号
    return store.state.month.tableData.filter(
      (item: { id: string | string[] }) => {
        return item.id.indexOf(indexId.value) !== -1;
      }
    );
  } else {
    return store.state.month.tableData;
  }
});
// 添加成员
  let dialogFormVisible = ref(false);
  const formLabelWidth = "140px";
  const form = reactive({
    id: "",
    name: "",
    sex: "",
    age: "",
    college: "",
    score: "",
  });
  // 点击添加
  let addList=function(){
    console.log(form)
    store.commit("addList",form)
    dialogFormVisible.value=false
  }
// 修改成员
  let showUpdate=ref(false)
  
  let num=ref()
  let update = reactive({
      id: "",
      name: "",
      sex: "",
      age: "",
      college: "",
      score: "",
    });
  let list={}
  const handleEdit = (index: number, row: any) => {
    console.log(index,row);
    num.value=index
    update.id=row.id
    update.name=row.name
    update.sex=row.sex
    update.age=row.age
    update.college=row.college
    update.score=row.score
    console.log(update)
    list=toRaw(update)
    showUpdate.value=true;
    // ElMessage.error("未实现");
  };
  let updateList=function(){
    console.log(num.value)
    store.commit("updateList",{index:num.value,list:list})
    showUpdate.value=false;
  }
</script>


<style scoped>
.main {
  width: 100%;
}

.head {
  height: 130px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}
h3 {
  margin-left: 10px;
}
.cardCol {
  margin-left: 50px;
  width: 500px;
  display: flex;
  align-items: center;
}
.cardCol span {
  display: block;
  width: 100px;
  text-align: center;
}
.flexfoot {
  display: block;
  display: flex;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
</style>